﻿@using Microsoft.AspNetCore.Mvc.Localization
@using Volo.Abp.Users
@using Volo.CmsKit.Localization
@inject ICurrentUser CurrentUser
@model Volo.CmsKit.Public.Web.Pages.CmsKit.Shared.Components.Rating.RatingViewModel
@inject IHtmlLocalizer<CmsKitResource> L

@{
    var modalId = "ratingDetail_" + Model.EntityType + "_" + Model.EntityId;
    modalId = modalId.Replace(".", "-").Replace(":", "-").Replace("/", "-").Replace(" ", "-");
    var modalLabelId = modalId + "_label";
}

<div class="row row">
    <div class="col">
        <div class="cms-rating-area" data-entity-type="@Model.EntityType" data-entity-id="@Model.EntityId" id="cms-rating_{@Model.EntityType}_{@Model.EntityId}">
      
            @if (CurrentUser.IsAuthenticated)
            {
                @if (Model.Ratings != null)
                {
                    <a href="#" class="text-muted ms-1 text-decoration-none" data-bs-toggle="modal" data-bs-target="#@modalId">
                        <i class="far fa-question-circle"></i>
                    </a>

                    <div class="modal fade" id="@modalId" tabindex="-1" role="dialog" aria-labelledby="@modalLabelId" aria-hidden="true">
                        <div class="modal-dialog modal-dialog-centered" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title" id="@modalLabelId">Rating Detail</h5>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                </div>
                                <div class="modal-body">
                                    <div class="text-center mb-3">
                                        <h4>@L["AverageRating"]: @Model.AverageRating.ToString("F1")</h4>
                                        <small class="text-muted">(@Model.TotalRating @L["TotalRatings"])</small>
                                    </div>
                                    <hr />
                                    <div class="row text-center">
                                        @foreach (var rating in Model.Ratings)
                                        {
                                            <div class="col">
                                                <label>@rating.StarCount @L["Star"]</label>
                                                <div class="bar-container">
                                                    <div class="bar bar-@rating.StarCount" style="width: @(rating.Count * 100 / Model.TotalRating)%"></div>
                                                </div>
                                                <div><small class="text-muted">@rating.Count Rate(s)</small> </div>
                                            </div>
                                        }
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                }

                <small class="live-rating text-center d-inline-block" style="width: 32px">@Model.AverageRating.ToString("F1")</small>

                <span class="my-rating text-dark p-1" data-rating="@(Model.CurrentRating ?? 0)" data-readonly="@Model.IsReadOnly">
                </span>
            }
            else
            {
                <small class="live-rating text-center d-inline-block" style="width: 32px">@Model.AverageRating.ToString("F1")</small>
                <span class="my-rating text-dark p-1" data-authenticated="True" data-bs-toggle="popover" data-bs-placement="right" data-html="true" data-content="<div class='text-center'><div class='d-grid gap-2'><a href='@Model.LoginUrl' class='btn btn-primary'>@L["LoginToRate"]</a></div></div>"></span>
                <span class="rating-login"></span>
            }
        </div>
    </div>
</div>